<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css">
    <style>
        #avatar_img {
            margin-left: 20px;
        }

        #avatar {
            display: none;
        }

        .error {
            color: red;
        }
    </style>
</head>
<body>
<h3>注册页面</h3>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-offset-3">

            <form id="form">
                {% csrf_token %}
                {% for field in form2 %}
                    <div class="form-group">
                        <label for='{{ field.auto_id }}'>{{ field.label }}</label>
                        {{ field }} <span class="error pull-right"></span>
                    </div>
                {% endfor %}
                <div class="form-group">
                    <label for="avatar">
                        头像<img id="avatar_img" width="60" height="60" src="/static/blog/img/default.jpg/" alt="">
                    </label>
                    <input id="avatar" type="file">
                </div>

                <input type="button" class="btn btn-default reg_btn" value="注册">
                <input type="button" class="btn btn-default f_btn" value="返回">
            </form>
        </div>
    </div>
</div>

<script src="/static/js/jquery-3.2.1.min.js"></script>

<script>
    //头像预览
    $('#avatar').change(function () {
        var file_obj = $(this)[0].files[0];

        var reader = new FileReader();

        //异步执行
        reader.readAsDataURL(file_obj);

        reader.onload = function () {
            $("#avatar_img").attr('src', reader.result)
        }


    });

    $('.f_btn').click(function () {
        location.href = '/login/'
    })

    $('.reg_btn').click(function () {
        var form_data = new FormData();
        var request_data = $('#form').serializeArray();
        $.each(request_data, function (index, data) {
            form_data.append(data.name, data.value)
        })

        form_data.append('avatar', $('#avatar')[0].files[0]);

        $.ajax({
            url: '',
            type: 'post',
            data: form_data,
            contentType: false,
            processData: false,
            success: function (data) {
                //console.log(data)
                if (data.user) {
                    location.href = '/login/'
                } else {
                    $('span.error').html('');
                    $('.form-group').removeClass('has-error');
                    $.each(data.msg, function (field, error_list) {
                        //console.log(field, error_list);
                        if (field == '__all__') {
                            console.log(field)
                            $('#id_re_pwd').next().html(error_list[0]).parent().addClass('has-error');
                        }
                        $('#id_' + field).next().html(error_list[0]);
                        $('#id_' + field).parent().addClass('has-error');
                    })
                }
            }
        })
    })
</script>
</body>
</html>